<%@ page language="java" pageEncoding="UTF-8"%>
<%@page import="java.util.List"%>
<%@page import="com.usernet.product.entity.Photo"%>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>

		<link rel="stylesheet" type="text/css" href="resources/css/style.css">
		<script src="resources/js/comm.js"></script>
		<script src="resources/js/jquery-1.4.min.js"></script>
		<script type="text/javascript" src="resources/js/imgPreview/CJL.0.1.min.js"></script>
		<script type="text/javascript" src="resources/js/imgPreview/ImagePreviewd.js"></script>
		<script type="text/javascript">
	function checkForm() {
		if(i==0){
			alert("请至少添加一个截图");   
		}else if(!checkFiles()){
			return;
		}else {
			loading();
			submitForm("addform");
		}
	}
	function checkFiles(){
		for(var j=0;j<i;j++){
			var f = $("#file_"+j).val();
			if(f==""){
				alert("请选择图片");
				return false;
			}else if(!checkPic(f)){
				alert("请选择图片\n类型应为：PNG或JPG");
				return false;
			}else{
				continue;
			}
		}
		return true;
	}
	function deletePhoto(btn){
		$.ajax( {
			type : "POST",
			url : "photo.do",
			dataType : "text",
			data : {
				method : "doDelete",
				id : btn.id
			},
			success:function(data){
				if(data=="1"){
					$("#tr_"+btn.id).remove();	
				}else{
					alert("删除失败");
				}
			}});
	}
</script>
	</head>

	<body onkeydown="if(event.keyCode==27) return false;">
		<jsp:include page="../inc/header.jsp"></jsp:include>
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td height="30" background="resources/images/other/tab_05.gif">
					<table width="100%" border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td width="12" height="30">
								<img src="resources/images/other/tab_03.gif" width="12"
									height="30" />
							</td>
							<td>
								<div class="page_title">
									<img align="middle" src="resources/images/other/tb.gif"
										width="16" height="16" />
									查看截图
								</div>
							</td>
							<td>
								<div class="button_bar">
									<input value="返回" type="button" id="btn_back" class="common_button" onclick="history.go(-1);">
									<input value="上传" type="button" id="btn_ok" class="common_button" onclick="checkForm();">
									<input value="刷新" type="button" id="btn_re" class="common_button" onclick="location='software.do?method=toPhoto&id=${id}';loading();">
								</div>
							</td>
							<td width="16" height="30">
								<img src="resources/images/other/tab_07.gif" width="16"
									height="30" />
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td>
					<table width="100%" border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td width="8" background="resources/images/other/tab_12.gif">
							</td>
							<td>
								<form action="photo.do" method="post" id="addform" enctype="multipart/form-data">
									<input type="hidden" name="method" value="doAdd">
									<input type="hidden" name="softId" value="${id }">
									<table id="file_tab" cellspacing="1" cellpadding="0" class="query_form_table">
									<tr>
										<th width="50%" align="right">选择图片</th>
										<td width="50%"><input onclick="addFile()" id="btn_add" class="common_button" value="添加一张" type="button"/></td>
									</tr>
									<logic:iterate id="item" name="photos">
									<tr id="tr_${item.id }">
									<td width="50%" align="right">
									<a title="点击查看大图" href="javascript:location='type.do?method=show&url=${item.photo }&t=1';loading();"><img border="0" id="photo_${item.id }" src="upload/photo/${item.photo }" width="100" height="100"/></a>
									</td>
									<td  width="50%" valign="bottom">
									<input id="${item.id }" onclick="if(window.confirm('确认删除吗?')){this.disabled = true;this.value='删除中...';$('#loadding_${item.id}').css('display','block');deletePhoto(this);}" class="common_button" value="删除" type="button"/>
									<img id="loadding_${item.id }" style="display: none;" src="resources/images/loadding.gif"/>
									</td></tr>
									</logic:iterate>
									</table>
								</form>
							</td>
							<td width="8" background="resources/images/other/tab_15.gif">
							</td>
						</tr>
						<tr>
							<td width="8" background="resources/images/other/tab_12.gif"></td>
							<td>
								&nbsp;
							</td>
							<td width="8" background="resources/images/other/tab_15.gif"></td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td height="35" background="resources/images/other/tab_19.gif">
					<table width="100%" border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td width="12" height="30">
								<img src="resources/images/other/tab_18.gif" width="12"
									height="35" />
							</td>
							<td>
								&nbsp;
							</td>
							<td width="16">
								<img src="resources/images/other/tab_20.gif" width="16"
									height="35" />
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</body>
</html>
<script>
var i=0;
function addFile() 
{ 
   var tr = $("<tr id=\"tr_"+i+"\"><td width=\"50%\" align=\"right\"><img id=\"img_"+i+"\" width=\"100\" height=\"100\"/><input name=\"mFile"+i+"\" id=\"file_"+i+"\" type=\"file\"></td><td  width=\"50%\" valign=\"bottom\"><input onclick=\"removeTr(this)\" id=\""+i+"\" class=\"common_button\" value=\"删除\" type=\"button\"/></td></tr>")
    $("#file_tab").append(tr); 
  	 var ip = new ImagePreview( $$("file_"+i), $$("img_"+i), {
	   maxWidth: 100, maxHeight: 200
	  });
	 ip.img.src = ImagePreview.TRANSPARENT;
	  ip.file.onchange = function(file){ip.img.src="";ip.preview(); };
	  i++;
} 
function removeTr(btn){
	$("#tr_"+btn.id).remove();	
	i--;
}

</script>
<jsp:include page="../inc/footer.jsp"></jsp:include>